<template>
  <Div>
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row>
          <el-col :span="8">
            <el-form-item label="快递公司">
              <el-select v-model="formInline.company" placeholder="快递公司">
                <el-option label="申通" value="shentong"></el-option>
                <el-option label="EMS" value="ems"></el-option>
                <el-option label="顺丰" value="shunfeng"></el-option>
                <el-option label="圆通" value="yuantong"></el-option>
                <el-option label="中通" value="zhongtong"></el-option>
                <el-option label="韵达" value="yunda"></el-option>
                <el-option label="京东" value="jingdong"></el-option>
                <el-option label="天天" value="tiantian"></el-option>
                <el-option label="汇通" value="huitongkuaidi"></el-option>
                <el-option label="全峰" value="quanfengkuaidi"></el-option>
                <el-option label="德邦" value="debangwuliu"></el-option>
                <el-option label="宅急送" value="zhaijisong"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递单号">
              <el-input
                v-model="formInline.number"
                placeholder="快递单号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="block" v-loading="loading">
      <el-timeline :reverse="true">
        <el-timeline-item
          v-for="timeline in info"
          :timestamp="timeline.time"
          :key="timeline.time"
          placement="top"
        >
          <el-card>
            <h4>{{ timeline.context }}</h4>
            <p>离开时间: {{ timeline.ftime }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </Div>
</template>

<script>
import axios from "axios";
export default {
  name: "PageOne",
  data() {
    return {
      loading: false,
      info: [],
      formInline: {
        number: "",
        company: "",
      },
    };
  },
  methods: {
    onSubmit() {
      this.loading = true;
      axios
        .get(
          `https://wu-hongzhuo11.gitee.io/whz/query?type=${this.formInline.company}&postid=${this.formInline.number}`
        )
        .then(
          (response) => {
            this.info = response.data.data;
            this.loading = false;
            this.$message({ message: "数据加载成功!", type: "success" });
          },
          (error) => {
            // 失败的提示
            this.$message.error("请求失败！！或无此信息" + error.message);
          }
        );
    },
  },
};
</script>

<style lang="less" scoped>
.el-form-item{
  width: 100%;
  
 
}
.el-card{
  margin-bottom: 20px;
}
</style>